<template>
    <div class="quick" style="background-color: white;">
        <div>
            <div>快捷入口</div>
            <div style="display: flex; justify-content: space-between;text-align: center;margin-top: 20px">
                <div v-for="item in topath" :key="item.id" @click.native="lesgo(item.id)" style="cursor: pointer;">
                    <img :src="item.img" alt="" width="40px">
                    <div style="font-size: 15px;color: #697086">{{ item.title }}</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, shallowRef } from 'vue';
import { useRouter } from 'vue-router'
let router = useRouter()
let topath: any = shallowRef([
    {
        id: 1,
        title: '假期审批',
        path: '/home/approval',
        img: ''
    },
    {
        id: 2,
        title: '社保管理',
        path: '/home/social',
        img: ''
    },
    {
        id: 3,
        title: '角色管理',
        path: '/home/role',
        img: ''
    },
    {
        id: 4,
        title: '添加员工',
        path: '/home/employee/add',
        img: ''
    },
    {
        id: 5,
        title: '添加权限',
        path: "/home/permission",
        img: ''
    }
])
const lesgo = (id: number) => {
    let paths = topath.value.findIndex((item: any) => item.id == id)
    router.push(topath.value[paths].path)
}
</script>

<style scoped></style>